<template>
  <div>
    <statusList
      class="f-ml30 f-mr30 f-mb20"
      :loading="isloading"
      :tableColumns="tableColumns"
      :tableData="attachmentData"
    />
    <Modal :title="previewImg.imgName" v-model="visible" style="z-index:10000">
      <img :src="previewImg.imgUrl" v-if="visible" style="width: 100%" />
    </Modal>
  </div>
</template>

<script>
import { fetchFile } from "@/libs/commonApi";
import util from "@/libs/util";
export default {
  props: {
    attachmentData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      visible: false,
      previewImg: {},
      isloading: false,
      tableColumns: {
        maxHeight: 500,
        height: 300,
        columns: [
         
          {
            title: "附件名",
            key: "attachmentName",
            align: "center",
            tooltip: true,
            render: (h, params) => {
              return (
                <div class="action-flex">
                  <a
                    style={{
                      color: "##2d8cf0"
                    }}
                    onClick={(a, b) => {
                      this.openEditModal(params.row);
                    }}
                  >
                    {params.row.attachmentName}
                  </a>
                </div>
              );
            }
          },
          {
            title: "附件类型",
            key: "attachmentExtension",
            align: "center",
            tooltip: true,
            render: (h, params) => {
              return (
                <div>
                  {params.row.attachmentName.slice(
                    params.row.attachmentName.indexOf(".") + 1
                  )}
                </div>
              );
            }
          },
          {
            title: "上传人",
            key: "operatorUser",
            align: "center",
            tooltip: true
          },
          {
            title: "上传时间",
            key: "createTime",
            align: "center",
            tooltip: true
          }
        ]
      },
      tableData: []
    };
  },
  computed: {},
  created() {
    
  },
  mounted() {},
  watch: {
    attachmentData: {
      handler(val) {
        if(val&&val.length>0) {
          this.tableData = this.attachmentData;
        }
      }
    }
  },
  methods: {
    openEditModal(row) {
      if (row.fileBlob) {
        if (
          this.sliceString(
            row.attachmentName.slice(row.attachmentName.indexOf(".") + 1)
          )
        ) {
          this.previewImg.imgName = row.attachmentName;
          this.previewImg.imgUrl = window.URL.createObjectURL(row.fileBlob);

          this.visible = true;
        } else {
          util.download(row.fileBlob, row.attachmentName);
        }
      } else {
        fetchFile(row.url).then(blob => {
          if (
            this.sliceString(
              row.attachmentName.slice(row.attachmentName.indexOf(".") + 1)
            )
          ) {
            this.previewImg.imgName = row.attachmentName;
            this.previewImg.imgUrl = window.URL.createObjectURL(blob);

            this.visible = true;
          } else {
            util.download(blob, row.attachmentName);
          }
          row["fileBlob"] = blob;
        });
      }
    },
    sliceString(extension) {
      const ext = extension.toLowerCase();
      return ext === "jpg" || ext === "jpeg" || ext === "gif" || ext === "png";
    }
  },
  components: {
    statusList: () => import("@/components/uploadModal/statusList")
  }
};
</script>

<style scoped lang="scss">
.sub-title {
  font-size: 22px;
  margin-left: 50px;
  margin-bottom: 5px;
  padding-top: 20px;
}
</style>
